---
title: gluestack-ui Portal Component | Installation, Usage, and API

description: A portal component renders its children outside the parent component's DOM hierarchy.

pageTitle: Portal

pageDescription: A portal component renders its children outside the parent component's DOM hierarchy.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Components/Overlay/Portal" />

import {
  VStack,
  Box,
  Text,
  HStack,
  Button,
  ButtonText,
  ButtonIcon,
  Portal,
  CloseIcon
} from '../../core-components/nativewind';

import { transformedCode } from '../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
  CollapsibleCode,
  Tabs
} from '@gluestack/design-system';

import Wrapper from '../../core-components/nativewind/Wrapper';

This is an illustration of **Pressable** component.

<Wrapper>
  <CodePreview
    _rendererWrapper={{ px: '$2.5' }}
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      function App(){
          const [visible, setVisible] = React.useState(false);
          const handleClose = () => setVisible(false);
          return (
            <>
              <Portal
                isOpen={visible}
                className="justify-center items-center"
              >
                <HStack className="border-2 w-1/3 py-10 gap-4 rounded-lg flex-row justify-center items-center bg-background-0">
                  <Text className="text-typography-950">Portal Content</Text>
                  <Button
                    size="xs"
                    className="h-6 px-1 absolute top-2 right-2"
                    variant="outline"
                    onPress={handleClose}
                  >
                    <ButtonIcon as={CloseIcon} />
                  </Button>
                </HStack>
              </Portal>
              <Button onPress={() => setVisible(!visible)}>
                <ButtonText>Toggle Portal</ButtonText>
              </Button>
            </>
          );
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        HStack,
        Text,
        Wrapper,
        Portal,
        Button,
        ButtonText,
        ButtonIcon,
        CloseIcon
      },
      argsType: {
      },
    }}
  />
</Wrapper>

<br />


>Note: The portal component renders its children outside the parent component's DOM hierarchy. However, it is important to note that the portal component is created using React context. This means that the portal component will not work if the parent component is not wrapped in a `GluestackUIProvider` or `OverlayProvider`.

## Installation

<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add portal
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Install the following dependencies:

```bash

npm i @gluestack-ui/overlay

```

### Step 2: Copy and paste the following code into your project.

<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/portal/index.tsx --%% 
```

</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { Portal } from '@/components/ui/portal';
```

```jsx
export default () => <Portal />;
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### Portal


<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              If true, the portal will open.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isKeyboardDismissable</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              If true, the keyboard can dismiss the portal.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>useRNModal</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              If true, renders react-native native modal.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>useRNModalOnAndroid</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              If true, renders react-native native modal only in android.
            </Table.TText>
          </Table.TD>
        </Table.TR>
         <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onRequestClose</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`((event: NativeSyntheticEvent<any>) => void) | undefined`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
             callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. This is required on Apple TV and Android.
             Only applicable when `useRNModal` or is true.
            </Table.TText>
          </Table.TD>
        </Table.TR>
         <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>animationPreset</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`"fade" | "slide" | "none"`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>"fade"</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              The animation preset for the portal.
            </Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

>Note: The portal component can be used to create a modal, popover, menu, tooltip, or any other component that needs to be rendered outside the parent component's DOM hierarchy. However, We recommend using our components like `Modal`, `Popover`, `Menu`, `Tooltip` for these use cases since they handle all the accessibility.